<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="right-div">
          <span  @click="drawer = true">欢迎~{{ adminmsg.uname }}</span>
        </div>  
      </el-header>

      
      <el-container>
        <el-aside>
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @select="toPage">
            <el-sub-menu index="1">
              <template #title>
                <el-menu-item index="/index">
                <span>首页</span>
                </el-menu-item>
              </template>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                 <el-icon>
                  <location />
                </el-icon>
                <span>企业管理</span>
              </template>
              <el-menu-item index="/cars">车辆管理</el-menu-item>
              <el-menu-item index="/models">车型管理</el-menu-item>
              <el-menu-item index="/adminuser">用户管理</el-menu-item>
              <el-menu-item index="/adminorders">订单管理</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="我的信息" name="1">
            <div>
              <el-descriptions column="1" border >
                <el-descriptions-item label="用户名">{{ adminmsg.username }}</el-descriptions-item>
                <el-descriptions-item label="权限">{{ adminmsg.user }}</el-descriptions-item>
                <el-descriptions-item label="电话号">{{ adminmsg.telephone }}</el-descriptions-item>
                <el-descriptions-item label="真实姓名">{{ adminmsg.name }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ adminmsg.gender }}</el-descriptions-item>
                <el-descriptions-item label="网名">{{ adminmsg.uname }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ adminmsg.card }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-collapse-item>
          <el-collapse-item title="设置" name="2">
            <el-button type="erorr" @click="zhuxiao()">退出登录</el-button>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>





  </div>
</template>


<script lang="ts" setup>
import { UserFilled } from '@element-plus/icons-vue'
import router from '@/router'
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { ElMessage } from 'element-plus';
import adminApi from '@/api/adminApi';
import { useTokenStore } from '@/stores/token';
const TokenStore=useTokenStore();

const drawer = ref(false)

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
}


const adminmsg = ref({
  id: '',
  username: '',
  password: '',
  user: '',
  name: '',
  uname: '',
  gender: '',
  telephone: '',
  card: ''
});

//查询个人用户信息
function longinfo() {
adminApi.longinfo()
    .then(resp => {
      adminmsg.value=resp.data;
        //隐藏对话框
    });
}





//强制注销 把令牌丢了
function zhuxiao() {
  TokenStore.$reset();
  ElMessage({
    message: "退出成功",
    type: 'success',
    duration: 2000,
    onClose: () => {
      toPage('/cars');
    }
  });

}
function toPage(indexPath) {
  //编程式导航
  router.push(indexPath);
}


longinfo();
</script>

<style scoped>
.right-div {
  position: absolute;
  top: 20px;
  /* 根据需要调整 */
  right: 20px;
  /* 根据需要调整 */
  cursor: pointer;
  /* 鼠标悬停时显示手形图标，表明可点击 */
}  
</style>
